<!-- 人事-基础设置-实习期-实习指标库 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title" showBack> </pageHeaderNew>
    </template>
    <ConditionBox :margin-bottom="20">
      <template #left>
        <a-input-search
          :style="{ width: '220px' }"
          placeholder="名称"
          search-button
          @search="refresh"
          @press-enter="refresh"
          v-model="params.name"
        />
      </template>
      <template #right>
        <a-button type="primary" @click="add(null)">新增指标</a-button>
        <a-button type="outline" status="danger" @click="del(null)"
          >批量删除</a-button
        >
      </template>
    </ConditionBox>
    <table-turn :table-data="getTableData" ref="tableRef" :args="args">
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column :width="200" data-index="name" title="指标名称">
      </a-table-column>
      <a-table-column :width="200" data-index="remark" title="指标描述">
      </a-table-column>
      <a-table-column
        :width="200"
        data-index=""
        title="评分标准"
        :headerCellStyle="{
          height: '30px'
        }"
      >
        <a-table-column
          :width="200"
          data-index="excellent"
          title="优秀A"
          :headerCellStyle="{
            height: '30px'
          }"
        >
        </a-table-column>
        <a-table-column
          :width="200"
          data-index="good"
          title="良好B"
          :headerCellStyle="{
            height: '30px'
          }"
        >
        </a-table-column>
        <a-table-column
          :width="200"
          data-index="qualified"
          title="合格C"
          :headerCellStyle="{
            height: '30px'
          }"
        >
        </a-table-column>
        <a-table-column
          :width="200"
          data-index="range"
          title="较差D"
          :headerCellStyle="{
            height: '30px'
          }"
        >
        </a-table-column>
        <a-table-column
          :width="200"
          data-index="wrong"
          title="差E"
          :headerCellStyle="{
            height: '30px'
          }"
        >
        </a-table-column>
      </a-table-column>
      <a-table-column
        :width="90"
        data-index="enable"
        title="启用状态"
        align="center"
      >
        <template #cell="{ record: { enable } }">
          <a-tag
            class="enable"
            :color="
              enable === 1 ? `rgb(var(--green-1))` : 'rgb(var(--danger-1))'
            "
            :style="{
              color:
                enable === 1 ? `rgb(var(--green-6))` : 'rgb(var(--danger-6))',
              '--enable':
                enable === 1 ? `rgb(var(--green-6))` : 'rgb(var(--danger-6))'
            }"
          >
            {{ enable === 1 ? '启用' : '停用' }}
          </a-tag>
        </template>
      </a-table-column>
      <a-table-column
        :width="120"
        data-index=""
        title="操作"
        fixed="right"
        align="center"
      >
        <template #cell="{ record }">
          <a-space :size="0">
            <a-tooltip content="编辑">
              <IconFont
                type="icon-edit"
                :size="26"
                :style="{
                  cursor: 'pointer'
                }"
                @click="goEdit(record)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                content="是否确认删除该条数据?"
                position="left"
                @ok="del(record.id)"
              >
                <icon-font
                  type="icon-delete"
                  :size="26"
                  :style="{
                    cursor: 'pointer'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </a-space>
        </template>
      </a-table-column>
    </table-turn>
  </ContentCard>
  <AddIndex
    v-model:visible="modalVisible"
    @indexEmit="indexEmit"
    :data="currData"
  ></AddIndex>
</template>

<script lang="tsx" setup>
import {
  PostInternshipIndex,
  PutInternshipIndex,
  GetInternshipIndex,
  DelInternshipIndex
} from '@/apis/management/human/baseSetting/internshipSetting';
import { BpiIndex } from '@/apis/management/performance/baseSetting/template/type';
import { Message, Modal } from '@arco-design/web-vue';
import AddIndex from './Components/AddIndex/index.vue';

const router = useRouter();
const title = '实习指标库';

// 选择器配置
const args = {
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  }
};
let modalVisible = ref(false); // 判断新增弹出框是否打开
let currData = ref({}); // 储存当前选中数据
let tableRef = ref();
const selectedList = computed(() => tableRef.value.selectedList);

// 新增
const add = (record: any) => {
  reset();
  modalVisible.value = true;
};
/**
 * 重置当前数据
 */
const reset = () => {
  currData.value = {
    name: '',
    remark: '',
    excellent: '',
    good: '',
    qualified: '',
    range: '',
    wrong: '',
    enable: 1
  };
};
const params = reactive({ name: '' });
// 获取表格数据
const getTableData = async (pageData?: any) => {
  try {
    const res = await GetInternshipIndex({
      ...pageData,
      name: params.name
    });
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log(error);
  }
};
// 编辑
const goEdit = (record: any) => {
  console.log(record);
  currData.value = record;
  modalVisible.value = true;
};

// 删除
const del = async (id: number | null) => {
  try {
    if (!id) {
      if (selectedList.value.length === 0) {
        Message.error('请至少选择一项！');
        return;
      } else {
        Modal.confirm({
          title: '提示',
          content: '确定要删除选中的数据吗？',
          onOk: async () => {
            try {
              await DelInternshipIndex({
                ids: selectedList.value
              });
              tableRef.value.selectedList = [];
              refresh();
            } catch (error: unknown) {
              console.log(error);
            }
          }
        });
      }
    } else {
      await DelInternshipIndex({ ids: [id] });
      refresh();
    }
  } catch (error: unknown) {
    console.log(error);
  }
};

// 弹窗自定义事件
const indexEmit = async (data: any, isContinue?: boolean) => {
  if (data.id) {
    await PutInternshipIndex(data);
  } else {
    await PostInternshipIndex(data);
  }
  refresh();
};

// 刷新表格数据
const refresh = () => {
  tableRef.value.loadData();
};
</script>

<style scoped lang="less">
.enable::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: relative;
  right: 3px;
  background-color: var(--enable);
}
</style>
